<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/css/element.css">
</head>
<script src="/js/Vue.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/Qs.js"></script>
<script src="/js/formDataUtils.js"></script>
<style>
    * {
        margin:0;
        padding:0;
    }
    html, body {
        height: 100%;
    }

    #container {
        height: calc(100% - 12px);
        padding:5px;
    }

    .el-card {
        height: 100%;
    }
    .el-card__body {
        height:calc(100% - 30px);
    }
</style>
<body>
<div id="container">
    <el-card>
        <el-form :model="form" :rules="rules" ref="form" :label-width="formLabelWidth">
                    <el-form-item label="主题" prop="subject">
            <el-input v-model="form.subject" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="昵称" prop="nick">
            <el-input v-model="form.nick" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="标题" prop="name">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model.number="form.age" autocomplete="off"></el-input>
          </el-form-item>
          <el-row style="text-align: center;">
                <el-col>
                    <el-button @click="close">取消</el-button>
                    <el-button type="primary" @click="addFormSubmit('form')">确认</el-button>
                </el-col>
          </el-row>
        </el-form>
    </el-card>
</div>
<script>
    var index = parent.layer.getFrameIndex(window.name);
    var con = new Vue({
        el: "#container",
        data() {
            return {
                title: "这里是通过模板添加的弹窗！",
                formLabelWidth: "100px",
                form: {
                   subject:'',
                   nick:'',
                   name:'',
                   age:'',
                },
                //表单校验规则
                rules: {

                    subject: [
                        { required: true, message: '请输入主题', trigger: 'blur' },
                    ],

                    nick: [
                    ],

                    name: [
                        { required: true, message: '请输入标题', trigger: 'blur' },
                    ],

                    age: [
                        { required: true, message: '请输入年龄', trigger: 'blur' },
                        { type: 'number', message: '年龄必须为数字值'}
                    ],
                },
            }
        },
        mounted() {

        },
        methods: {
            close() {
                parent.layer.close(index);
            },
            addFormSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let param = new FormData();
                        Object.keys(this.form).forEach((key) => {
                            param.append(key, this.form[key]);
                        });
                        axios.post('/test2/add', param).then(res => {
                            if (res.data.success) {
                                parent.tem.$message.success("添加成功！");
                            } else {
                                parent.tem.$message.error(res.data.message);
                            }
                            //父页面刷新表格数据
                            parent.tem.search();
                            //关闭弹窗
                            this.close();

                        }).catch(err => {
                            console.log(err);
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    })
</script>
</body>
</html>